<template>
  <div>
    <HouseSwiper></HouseSwiper>
    <form action="/" class="search">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      >
        <template #action>
          <div @click="onSearch"><van-icon name="location-o" size="25" color="#ffffff"/></div>
        </template>
      </van-search>
    </form>

    <ul class="index-nav">
      <li @click="goZheng">
        <img src="http://121.199.51.160/hkzf/img/1.56e3668a.png" alt="" />整租
      </li>
      <li @click="goHe">
        <img src="http://121.199.51.160/hkzf/img/2.5fbd9214.png" alt="" />合租
      </li>
      <li @click="goFind">
        <img
          src="http://121.199.51.160/hkzf/img/3.4fcfe89b.png"
          alt=""
        />地图找房
      </li>
      <li @click="goChu">
        <img src="http://121.199.51.160/hkzf/img/4.10b7441e.png" alt="" />去出租
      </li>
    </ul>
    <div>
      <van-cell-group inset>
        <van-cell title="租房小组" value="更多" />
      </van-cell-group>
      <div class="info">
        <span class="myinfo">
          <img src="http://121.199.51.160:8080/img/groups/1.png" alt="" />
          <div>
            <p>家住回龙观</p>
            <p>归属的感觉</p>
          </div>
        </span>
        <span class="myinfo">
          <img src="http://121.199.51.160:8080/img/groups/2.png" alt="" />
          <div>
            <p>宜居四五环</p>
            <p>大都市生活</p>
          </div>
        </span>
        <span class="myinfo">
          <img src="http://121.199.51.160:8080/img/groups/3.png" alt="" />
          <div>
            <p>喧嚣三里屯</p>
            <p>繁华的背后</p>
          </div>
        </span>
        <span class="myinfo">
          <img src="http://121.199.51.160:8080/img/groups/4.png" alt="" />
          <div>
            <p>比邻十号线</p>
            <p>地铁心连心</p>
          </div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import HouseSwiper from '@/components/HouseSwiper.vue'
import { Toast } from 'vant'
export default {
  data () {
    return {
      value: ''
    }
  },
  components: {
    HouseSwiper
  },
  methods: {
    onSearch (val) {
      Toast(val)
    },
    onCancel () {
      Toast('取消')
    },
    goZheng () {
      this.$router.push('/shouye/find')
    },
    goHe () {
      this.$router.push('/shouye/find')
    },
    goFind () {},
    goChu () {}
  }
}
</script>

<style lang="less">
.search {
  position: fixed;
  width: 100%;
  height: 34px;
  z-index: 9999;
  padding-top: 10px;
  top: 0;
}
.van-search {
  background-color: transparent !important;
}
.van-cell__title {
  font-weight: 600;
}
.index-nav {
  display: flex;
  justify-content: space-between;
  li {
    display: flex;
    width: 77px;
    height: 100px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 16px;
    img {
      width: 60px;
      height: 60px;
    }
  }
}
.info {
  display: flex;
  flex-wrap: wrap;
  .myinfo {
    margin: 0 20px 0;
    display: flex;
    img {
      width: 50px;
      height: 50px;
    }
    p {
      margin: 5px 0 0 16px;
    }
  }
}
</style>
